<script setup>
import LfButton from '@/components/commonUI/LfButton.vue'
import SelectClassify from './components/SelectClassify.vue'
import LfFormItem from '@/components/commonUI/LfFormItem.vue'
import LfImageUpload from '@/components/commonUI/LfImageUpload.vue'
import LfSwitch from '@/components/commonUI/LfSwitch.vue'
import { fetchCreateTopic } from '@/axios/api/topic'
import { ElMessage } from 'element-plus'
import LoadingIcon from '@/components/svgComponents/LoadingIcon.vue'
import SubmitSuccess from '../Submit/components/SubmitSuccess.vue'
import { useUserTopicListQuery } from '@/composables/useUserInfoQuery'
const isPrivate = ref(false)
const isVerify = ref(false)
const topicName = ref('')
const topicDesc = ref('')
const selectedClassifyId = ref(null)
const question = ref('')

const loading = ref(false)
const showSuccess = ref(false)

const { refetch: refetchUserTopicList } = useUserTopicListQuery()

const topicAvatarUploadRef = ref(null)
const topicCoverUploadRef = ref(null)

const handleSwitch = (value) => {
  isPrivate.value = value
  isVerify.value = true
}

const handleVerifySwitch = (value) => {
  isVerify.value = value
}

const createTopic = () => {
  if (!selectedClassifyId.value) {
    ElMessage({
      message: '请选择主题分类',
      type: 'error',
    })
    return
  }
  if (!topicName.value) {
    ElMessage({
      message: '请输入主题名称',
      type: 'error',
    })
    return
  }
  if (!topicDesc.value) {
    ElMessage({
      message: '请输入主题描述',
      type: 'error',
    })
    return
  }
  if (!topicAvatarUploadRef.value.uploadImgs.length) {
    ElMessage({
      message: '请上传主题头像',
      type: 'error',
    })
    return
  }
  if (!topicCoverUploadRef.value.uploadImgs.length) {
    ElMessage({
      message: '请上传主题封面',
      type: 'error',
    })
    return
  }

  loading.value = true

  topicAvatarUploadRef.value.uploadImg((res) => {
    topicCoverUploadRef.value.uploadImg((res2) => {
      const params = {
        topicName: topicName.value,
        description: topicDesc.value,
        isPrivate: isPrivate.value,
        rest: isVerify.value,
        cateId: selectedClassifyId.value,
        question: question.value,
        coverImage: res[0],
        bgImage: res2[0],
      }
      fetchCreateTopic(params).then((res) => {
        loading.value = false
        showSuccess.value = true
        refetchUserTopicList()
      })
    })
  })
}

const handleTopicNameChange = (value) => {
  topicName.value = value
}

const handleTopicDescChange = (value) => {
  topicDesc.value = value
}

const handleSelectClassify = (id) => {
  selectedClassifyId.value = id
}

const handleQuestionChange = (value) => {
  question.value = value
}
</script>

<template>
  <div class="p-4">
    <SubmitSuccess v-if="showSuccess" />
    <div v-else class="w-[80%] max-w-[1600px] mx-auto">
      <div class="flex justify-between mb-8" >
        <div class="flex gap-6 items-end">
          <!-- <div class="text-[28px] font-medium">创建主题</div> -->
          <SelectClassify :onSelectClassify="handleSelectClassify" />
        </div>
        <LfButton type="primary" @click="createTopic" :disable="loading">
          <div v-if="loading" class="flex items-center gap-2">
            <LoadingIcon color="#fff" />
            创建中
          </div>
          <div v-else>创建</div>
        </LfButton>
      </div>

      <div class="flex flex-col gap-4">
        <LfFormItem
          required
          label="主题名称"
          :maxLength="12"
          placeholder="请输入主题名称"
          :value="topicName"
          @change="handleTopicNameChange" />
        <LfFormItem
          required
          label="主题描述"
          type="textarea"
          :maxLength="20"
          placeholder="请输入主题描述"
          :value="topicDesc"
          @change="handleTopicDescChange" />

        <div class="flex gap-4 items-center border-1 border-[--line-1] rounded-md p-2 justify-between">
          <div>
            <div>设为私密主题</div>
            <div class="text-sm text-[--text-3]">开启则只有加入主题的用户才能访主题子内容</div>
          </div>
          <LfSwitch v-model="isPrivate" @update:modelValue="handleSwitch" />
        </div>

        <div class="border-1 border-[--line-1] rounded-md p-2">
          <div class="flex gap-4 items-center justify-between">
            <div>
              <div>开启加入主题版块验证</div>
              <div class="text-sm text-[--text-3]">开启后，用户需要通过管理员审核才能加入主题</div>
            </div>
            <LfSwitch v-model="isVerify" @update:modelValue="handleVerifySwitch" />
          </div>

          <div v-if="isVerify" class="mt-3">
            <LfFormItem
              label="申请问题"
              type="textarea"
              :maxLength="100"
              placeholder="请输入申请加入主题需要回答的问题"
              :value="question"
              @change="handleQuestionChange" />
          </div>
        </div>

        <div class="flex gap-6">
          <LfImageUpload title="上传头像*" :maxCount="1" ref="topicAvatarUploadRef" />
          <LfImageUpload title="上传封面*" :maxCount="1" width="360px" ref="topicCoverUploadRef" />
        </div>
      </div>
    </div>
  </div>
</template>
